<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>评测预约</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="./lib/css/layui.css" media="all">
</head>

<body>
    <!-- 查询 -->
    <form class="layui-form layui-row" action="" lay-filter="tableFilter" style="width: 90%;">
        <div class="layui-col-xs3 layui-form-item">
            <label class="layui-form-label">预约人姓名:</label>
            <div class="layui-input-block">
                <input type="text" name="senderName" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-col-xs3 layui-form-item ">
            <label class="layui-form-label">电话:</label>
            <div class="layui-input-block">
                <input type="text" name="tel" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>        
        <div class="layui-form-item layui-col-xs3">
            <div class="layui-input-block">
                <button lay-submit lay-filter="search" class="layui-btn layui-btn-normal">查询</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
    <!-- 表格 -->
    <table class="layui-hide" id="mainTable" lay-filter="mainTable"></table>
    <div>
        <!-- 编辑 -->
        <div id="historyPage" style="width:800px;height: 650px;display: none;">
        </div>
        <!-- 编辑结束 -->
    </div>
    <script src="./lib/layui.js" charset="utf-8"></script>
    <script src="./config.js"></script>
    <script type="text/html" id="tableOperation">
        {{#  if(d.state=="noFinish"){ }}
        <button type="button" class="layui-btn layui-btn-sm layui-btn-normal showHistory" lay-event="finish">
            完成预约
        </button>
        <button type="button" class="layui-btn layui-btn-sm layui-btn-success" lay-event="cancel">
            取消预约
        </button>
        {{# } }}
</script>
    <script>
        var currrowId = "";
        var isShowHistory=false;

        function getQueryString(name) {
            var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
            var r = window.location.search.substr(1).match(reg);
            if (r != null) {
                return unescape(r[2]);
            }
            return null;
        }
        layui.use(['table', "form", "layer", "jquery", "laydate"], function () {
            var table = layui.table;
            var form = layui.form;
            var $ = layui.$;
            var laydate = layui.laydate;
            var layer = layui.layer;
            var renderTabler=function(orgId){
                table.render({
                elem: '#mainTable'
                , headers: { Authorization: "bearer " + getQueryString('token') }
                , request: { pageName: "pageIndex", limitName: "pageSize" }
                , parseData: function (res) {                    
                    return { code: "0", msg: "ok", data: res.content, count: res.totalElements }
                }
                , page: true
                , url: requestUrl + '/service/psychology-service/reservation/reservationsByOrg?orgId='+orgId
                , cellMinWidt0h: 50 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                , cols: [[
                    { type: 'numbers', width: 80, title: '序号', width: 80 }
                    , { field: 'senderName', title: '预约人姓名' }
                    , { field: 'tel', title: '电话' }
                    , { field: 'content', title: '预约内容' }                    
                    , { field: 'atDate', title: '创建时间', }      
                    , {field: 'state',title:"状态",templet:function(d){
                        if(d.state=="noFinish")return "已预约";
                        else if(d.state=="cancel") return "已取消";
                        else if(d.state=="finish") return "已完成";
                    }}              
                    , { title: "操作", width: 260, templet: "#tableOperation" }
                ]]
                ,done:function(res,curr,count){
                    if(isShowHistory)
                        $(".showHistory").hide();
                }
            })};
            table.on('tool(mainTable)', function (obj) {
                switch (obj.event) {
                    case "finish":
                        request($, "put", requestUrl + '/service/psychology-service/reservation/finish?id=' + obj.data.id, {}, function (res) {
                            table.reload("mainTable")
                        });
                        break;
                    case "cancel":
                        request($, "put", requestUrl + '/service/psychology-service/reservation/cancel?id=' + obj.data.id, {}, function (res) {
                            table.reload("mainTable")
                        });
                        break;
                }
            });
            form.on("submit(search)", function (data) {
                table.reload("mainTable", { where: data.field });
                isShowHistory=false;
                return false;
            })
            request($, "get", requestUrl + '/service/focus-service/device/currOrg', {}, function (res) {
                orgId=res.syncOrgId;
                renderTabler(orgId)
            })
        });
        function request($, type, url, data, success) {
            $.ajax({
                url: url,
                data: data,
                type: type,
                headers: { Authorization: "bearer " + getQueryString('token') },
                success: function (res) {
                    success(res)
                }
            })
        }        
    </script>
</body>
<style>
    .layui-form-item {
        clear: inherit;
    }
</style>

</html>